<template>
  <div>
    <div class="forgot_container" style="margin-top: 40px">
      <li>手机号码：</li>
      <view class="login_userName_input">
        <li style="width: 50px; flex: none;-webkit-flex: none" @click="selectCountryCode">{{countryCode}}</li>
        <input type="number" @input="userNameChange" maxlength="11"/>
        <li style="width: 100px; flex: none;-webkit-flex:none;color: #ff4545;text-align: right"
            @click="getSmsCode">{{getVcode}}
        </li>
      </view>
    </div>
    <div class="forgot_container">
      <li>验证码：</li>
      <view class="login_pass_input">
        <input type="number" @input="vcodeChange"
               maxlength="6"/>
      </view>
    </div>
    <div class="forgot_container">
      <li>新密码：</li>
      <view class="login_pass_input">
        <input type="text" :password="showPass" @input="passChange"
               maxlength="16" :value="currentValue"/>
        <li
          style="width: 50px; flex: none;-webkit-flex:none;text-align: center;vertical-align: middle;position: relative"
          @click="swichPassIcon">
          <i class="iconfont" :class="[showPass ? 'icon-biyanjing':'icon-zhengyan']"
             style="font-size: 20px"
          />
        </li>
      </view>
    </div>

    <button :class="[isEnable?'button-state-black_normal':'button-state-disenable']"
            style="margin: 30px 20px 30px 20px;display: block" lang="zh_CN"
            @click="register"
    >
      注册
    </button>
  </div>
</template>

<script>
  import {mapActions} from 'vuex'
  import {saveUserInfo, saveToken} from '@/utils/wechat'
  import wechat from '@/utils/wx'
  import {obtainSmsCode} from '@/net/commonapi'

  export default {
    data() {
      return {
        countryCode: '+86',
        getVcode: '获取验证码',
        currentValue: '',
        isEnable: false,
        isUserOk: false,
        isVcodeOk: false,
        isPassOk: false,
        userName: '',
        vcode: '',
        password: '',
        sencond: 60,
        showPass: true,
        timerNum: null
      }
    },
    watch: {
      // 如果 `question` 发生改变，这个函数就会运行
      countryCode: function (newCountryCode, oldCountryCode) {
        this.handlerBtnByAccount()
      }
    },
    onLoad() {
      this.$wx.setTitleBarTitle('注册账号')
    },
    methods: {
      ...mapActions('cart', ['getCarts']),
      swichPassIcon() {
        this.showPass = !this.showPass;
      },
      async getSmsCode() {
        if (!this.isUserOk) {
          this.$wx.showLongToast('请填写手机号码')
          return
        }
        const data = await obtainSmsCode({
          phone: this.userName,
          type: '1'
        })
        if (data.successCode) {
          const self = this
          clearInterval(this.timerNum)
          this.timerNum = setInterval(function () {
            self.sencond--
            if (self.sencond <= 0) {
              self.reset()
            } else {
              self.getVcode = '(' + self.sencond + ')s'
            }
          }, 1000)
          this.$wx.showLongToast('获取验证码成功')
        } else {
          this.$wx.showLongToast(data.message)
        }
      },
      async register() {
        if (!this.userName) {
          this.$wx.showShortToast('请填写手机号码')
          return
        }
        if (this.userName.length != 11) {
          this.$wx.showShortToast('请填写正确手机号码')
          return
        }
        if (!this.vcode.length) {
          this.$wx.showShortToast('请填写验证码')
          return
        }
        if (this.vcode.length != 6) {
          this.$wx.showShortToast('请填写正确验证码')
          return
        }
        if (!this.password.length) {
          this.$wx.showShortToast('请填写密码')
          return
        }
        const resData = await this.$fly.post(this.$url.URL_REGISTER, {
          vcode: this.vcode,
          country_code: this.countryCode,
          phone: this.userName,
          passwd: this.password
        })
        if (resData.successCode) {
          this.loginSuccess(resData.data)
          this.$wx.showLongToast(resData.message)
        } else {
          this.$wx.showLongToast(resData.message)
        }
      },
      async loginSuccess(loginInfo) {
        await saveUserInfo(loginInfo)
        await saveToken(loginInfo.access_token)
        this.getCarts()   //更新购物袋
        this.$root.$eventHub.$emit('requestProductInfo', '')  //更新商品详情
        this.$root.$eventHub.$emit('requestGoods', true)  //更新商品列表
        this.$root.$eventHub.$emit('requestGoods2', true)  //更新商品列表
        this.$wx.back(2)
      },
      selectCountryCode() {
        this.$wx.jumper("../countrycode/main")
      },
      userNameChange(e) {
        this.userName = e.target.value
        this.handlerBtnByAccount()
      },
      handlerBtnByAccount() {
        if (this.countryCode == '+86') {
          this.isUserOk = this.userName.length == 11
        } else {
          this.isUserOk = this.userName.length >= 4 && this.userName.length <= 11
        }
        this.isEnable = this.isUserOk && this.isVcodeOk && this.isPassOk
      },
      vcodeChange(e) {
        this.vcode = e.target.value
        this.isVcodeOk = this.vcode.length == 6
        this.isEnable = this.isUserOk && this.isVcodeOk && this.isPassOk
      },
      passChange(e) {
        this.handlerPassBtn(e.target.value)
      },
      handlerPassBtn(content) {
        this.password = content
        this.isPassOk = this.password.length >= 6 && this.password.length <= 16
        this.isEnable = this.isUserOk && this.isPassOk && this.isVcodeOk
        this.currentValue = this.password
      },
      reset() {
        this.sencond = 60
        this.getVcode = '获取验证码'
        clearInterval(this.timerNum)
      }
    },
    created() {

    },
    mounted() {
      if (!this.$wx.isArrayEmpty(this.$root.$eventHub._events.countryCodeChange)) {
        this.$root.$eventHub.$off('countryCodeChange')
      }
      this.$root.$eventHub.$on('countryCodeChange', (item) => {
        this.countryCode = item.code
      })
    },
    destroyed() {
      this.$root.$eventHub.$off('countryCodeChange')
    },
    onUnload() {
      this.reset()
    }
  }
</script>

<style>
  .login_userName_input {
    display: flex;
    display: -webkit-flex;
  }

  .login_pass_input {
    display: flex;
    display: -webkit-flex;
  }

  .login_pass_input input {
    flex: 1;
    -webkit-flex: 1;
    display: inline-block;
    height: 40px;
  }

  .login_pass_input li {
    flex: 1;
    -webkit-flex: 1;
    display: inline-block;
    height: 40px;
    line-height: 40px;
  }

  .login_userName_input input {
    flex: 1;
    -webkit-flex: 1;
    display: inline-block;
    height: 40px;
  }

  .login_userName_input li {
    flex: 1;
    -webkit-flex: 1;
    display: inline-block;
    height: 40px;
    line-height: 40px;
  }

  .forgot_container {
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 10px;
    border-bottom: 1px solid black;
  }
</style>
